<template>
  <div class="hello">
  <button @click="counter+=1">点击:counter={{ counter }}</button>
  <button @click="clickHandle">按钮</button>
  <p>{{ message }}</p>
  <button @click="say">say hi</button>
  <button @click="say">say what</button>
  <ul>
    <li @click="clickItemHandle(item)" v-for="(item,index) in names" :key="index">{{ item }}</li>
  </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      counter :1,
      message:"消息通知",
      names:["iwen","ime","frank"]
    }
  },
  methods:{
     clickHandle(event){
     //在事件中读取data中的属性需要通过this.读取的
     this.message="消息没了"
     console.log(event);
     event.target.innerHTML="点击之后";
     },
     say(data){
      console.log(data);
     },
     clickItemHandle(item){
      console.log(item);
     }
  }
}
</script>

